<!DOCTYPE html>
<html xmlns:__html="http://www.w3.org/1999/xhtml">
<head>
    <link href="css/css/index.css" rel="stylesheet" type="text/css"/>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <meta name="author" content="www.lzqcode.com"/>
    <title>文章阅读</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/master.css"/>
    <link rel="stylesheet" href="css/gloable.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>
    <link rel="stylesheet" href="css/blog.css"/>

    <link rel="stylesheet" href="css/message.css"/>

    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/master.css"/>
    <link rel="stylesheet" href="css/gloable.css"/>
    <link rel="stylesheet" href="css/nprogress.css"/>
    <link rel="stylesheet" href="css/message.css"/>

    <script src="js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE库 -->
    <script src="js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>


    <!--引入wangeditor和代码高亮.js和代码高亮.css-->
    <script src="./wangEditor-file/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>

    <link href="wangEditor-file/monokai_sublime.min.css" rel="stylesheet">

    <script src="./wangEditor-file/highlight.min.js" type="text/javascript" charset="UTF-8"></script>



    <!-- 引入组件库 -->
    <script src="js/js/my-one-comment.js"></script>
    <script src="js/js/index.js"></script>


    <style>
        .toolbar {
            border: 1px solid #ccc;
        }
        .text {
            border: 1px solid #ccc;
            max-height: 1000px;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
<div class="header">
</div>

<header class="gird-header">

    <div class="header-fixed" >
        <my-header></my-header>
    </div>
</header>
<div class="doc-container" id="doc-container">
    <div class="container-fixed">
        <div class="col-content" style="width:100%">
            <div class="inner">
                <article class="article-list">
                    <input type="hidden" value="@Model.BlogTypeID" id="blogtypeid"/>
                    <section class="article-item">
                        <aside class="title" style="line-height:1.5;">
                            <h4>{{postmessage.title}}</h4>
                            <p class="fc-grey fs-14">
                                <small>
                                    作者：<a :href="'personal.html?account='+postmessage.account" target="_blank" class="fc-link">{{postmessage.nickname}}</a>
                                </small>
                                <small class="ml10">收藏量：<i class="readcount">{{postmessage.collectsum}}</i></small>
                                <small class="ml10">点赞量：<i class="readcount">{{postmessage.likesum}}</i></small>
                                <small class="ml10">评论量：<i class="readcount">{{postmessage.commentsum}}</i></small>
                                <small class="ml10">发布于 <label>{{postmessage.begintime}}</label> </small>
                            </p>
                        </aside>
                        <div class="time mt10" style="padding-bottom:0;">
                            <span class="day">{{postmessage.date}}</span>
                            <span class="month fs-18">{{postmessage.month}}<small class="fs-14">月</small></span>
                            <span class="year fs-18">{{postmessage.year}}</span>
                        </div>
                        <div class="content artiledetail"
                             style="border-bottom: 1px solid #e1e2e0; padding-bottom: 20px;">

                            <!--富文本编辑器-->
                            <div id="toolbar-container" class="toolbar"></div>
                            <div id="text-container" class="text"></div>

                            <div class="copyright mt20">
                                <p class="f-toe fc-black">
                                    非特殊说明，本文版权归 ZQ个人博客 所有，转载请注明出处.
                                </p>
                                <p class="f-toe">
                                    本文标题：
                                    <a href="?????" class="r-title">{{postmessage.title}}</a>
                                </p>
                            </div>
                            <div id="aplayer" style="margin:5px 0"></div>
                            <h6>延伸阅读</h6>
<!--                            点赞按钮位置-->
                            <div style="margin-left: 80%">

                                <span v-if="postmessage.isdianzan!=true">
                                    <el-button circle size="mini"  @click="dianzan">
                                        <svg t="1652932150878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="32" height="32"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="2269" fill="#bfbfbf"></path></svg>
                                    </el-button>
                                </span>
                                <span v-else>
                                    <el-button circle size="mini"  @click="jinggao">
                                        <svg t="1652932150878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2268" width="32" height="32"><path d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z" p-id="2269" fill="#1296db"></path></svg>
                                    </el-button>
                                </span>
                                <span>{{postmessage.likesum}}</span>
<!--                                收藏按钮位置-->
                                <span v-if="postmessage.iscollection!=true">
                                        <el-button circle size="mini" style="" @click="collect">
                                         <svg t="1655104050894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2138" width="32" height="32"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="2139" fill="#bfbfbf"></path></svg>
                                    </el-button>
                                </span>
                                <span v-else>
                                    <el-button circle size="mini" style="margin-left: 10px" @click="jinggao">
                                        <svg t="1655104050894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2138" width="32" height="32"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" p-id="2139" fill="#1296db"></path></svg>
                                    </el-button>
                                </span>
                                <span>{{postmessage.collectsum}}</span>
                            </div>
                            <ol class="b-relation"></ol>
                        </div>
                        <div class="bdsharebuttonbox share" data-tag="share_1">
                            <ul>
                                <li class="f-praise"><span><a class="s-praise"></a></span></li>
                                <li class="f-weinxi"><a class="s-weinxi" data-cmd="weixin"></a></li>
                                <li class="f-sina"><a class="s-sina" data-cmd="tsina"></a></li>
                                <li class="f-qq" href="www.qq.com"><i class="fa fa-qq"></i></li>
                                <li class="f-qzone"><a class="s-qzone" data-cmd="qzone"></a></li>
                            </ul>
                        </div>
                        <div class="f-cb"></div>
                        <div class="mt20 f-fwn fs-24 fc-grey comment"
                             style="border-top: 1px solid #e1e2e0; padding-top: 20px;">
                        </div>
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>发表评论</legend>
                            <div class="layui-field-box">
                                <div class="leavemessage" style="text-align:initial">
                                    <div class="layui-form blog-editor"
                                          action="" method="get" name="commentform" id="commentform">
                                        <el-input
                                                type="textarea"
                                                :rows="6"
                                                placeholder="请输入内容"
                                                v-model="replyText">
                                        </el-input>
                                        <div class="layui-form-item">
                                            <button class="layui-btn" style="margin-top: 20px;margin-bottom: 20px"
                                                @click="submitComment">提交评论</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <ul class="blog-comment" id="blog-comment"></ul>
                    </section>
                </article>
            </div>
        </div>

        <div class="f-cb"></div>
        <!--             评论部分             民生各有所乐兮，余独好修以为常 -->

        <my-one-comment></my-one-comment>
    </div>
</div>
<footer class="grid-footer">
    <div class="footer-fixed">
        <div class="copyright">
            <div class="info">
                <div class="contact">
                    <a href="javascript:void(0)" class="github" target="_blank"><i class="fa fa-github"></i></a>
                    <a href="#" class="qq" target="_blank"><i class="fa fa-qq"></i></a>
                    <a href="#" class="email" target="_blank"><i class="fa fa-envelope"></i></a>
                    <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                </div>
                <p class="mt05">
                    Copyright &copy; 2022-5 Knowledge Forum V.1.0.0 Power by 项目设计
                </p>
            </div>
        </div>
    </div>
</footer>


<script src="layui/layui.js"></script>
<script src="js/yss/gloable.js"></script>
<script src="js/plugins/nprogress.js"></script>
<script src="js/pagecomment.js"></script>
<script>NProgress.start();</script>
<script>
    window.onload = function () {
        NProgress.done();
    };
</script>

<script src="js/pagemessage.js"></script>

</div>
</body>

<script>
    var v=new Vue({
        el:"#app",
        data:{
            postid:"1",//测试用字段
            postmessage:[],//帖子、发布者、点赞等数量详情
            textarea:"v-model双向绑定",
            imageUrl:"",
            input3:"",
            select:"",
            bodys:"",
            //评论编辑区的内容
            replyText:"",
        },
        created() {


            let url = "queryOnePostByIdServlet.s?postId=";
            let id = location.search.replace(/\?postId=(\d+)/, "$1");
            url += id;
            console.log("==============aaaaaaaaa==================")
            axios.get(url).then(res => {
                console.log("------------bbbbbbbbbb-----------------")
                this.postmessage = res.data;
                editor.txt.html(this.postmessage.body);
                console.log("editor.gettext",editor.txt.text())
            })

        },
        methods:{
            //收藏文章
            collect(){
                let url="CollectionPostServlet.s?postId="+this.postmessage.id+"&sum="+this.postmessage.collectsum
                url+="&postAccount="+this.postmessage.account
                axios.get(url).then(res=>{
                    //如果点赞成功
                    if(res.data==1) {
                        //则将当前帐号是否收藏改为true，收藏数量加一
                        this.postmessage.iscollection = true
                        this.postmessage.collectsum=parseInt(this.postmessage.collectsum)+1
                        console.log("success")
                    }
                    else if(res.data==-1)
                        console.log("false")
                })
            },
            jinggao(){
                this.$message({
                    message: '您已经点过赞了~',
                    type: 'warning',
                    offset:70,
                });
            },
            //给帖子点赞的方法
            dianzan(){
                let url="AddPostSupportSum.s?postId="+this.postmessage.id+"&sum="+this.postmessage.likesum
                url+="&postAccount="+this.postmessage.account
                axios.get(url).then(res=>{
                    //如果点赞成功
                    if(res.data==1) {
                        //则将当前帐号是否点赞改为true，点赞数量加一
                        this.postmessage.isdianzan = true
                        this.postmessage.likesum=parseInt(this.postmessage.likesum)+1
                        console.log("success")
                    }
                    else if(res.data==-1)
                        console.log("false")
                })
            },
            //提交评论按钮
            submitComment(){
                console.log("-----init submitComment-----")
                console.log(this.replyText)
                if(this.replyText==""){
                    this.$message({
                        message: '警告，内容不能为空',
                        type: 'warning',
                        offset:70,
                    });
                    return;
                }
                let url="PutOneReplyServlet.s?postId="
                let id = location.search.replace(/\?postId=(\d+)/, "$1");
                url += id;
                url+="&body="+this.replyText;
                axios.get(url).then(res=>{
                    if(res.data==-1){
                        this.$message({
                            message: '错误，用户未登录！',
                            type: 'error',
                            offset:70,
                        });
                    }else{
                        this.$message({
                            message: '评论发布成功',
                            type: 'success',
                            offset:70,
                        });
                        console.log("改变条数：",res.data)
                        this.replyText=''
                    }
                })
            }
        }
    })
</script>

<!--wangEditor富文本框初始化-->
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#toolbar-container', '#text-container') // 传入两个元素
    editor.config.height = 50
    editor.config.menus = []
    editor.config.zIndex = 9
    editor.create()
    editor.disable()
    editor.disable()
</script>

</html>
